<template>
  <view class="courseDetails">
    <!-- 选项卡头部 -->
    <view class="tabs">
      <view 
        v-for="(item, index) in data.tabs" 
        :key="index" 
        class="tab-item" 
        :class="{active: data.currentTab === index}"
        @click="switchTab(index)">
        {{item}}
      </view>
	  <view class="share">
	  	<text>分享好友注册得企鹅币&nbsp;</text>
		<text class="iconfont" style="color:#f00;font-size:36rpx;">&#xe938;</text>
	  </view>
    </view>
    
    <!-- 选项卡内容 -->
    <view class="content">
	  <!-- 课程介绍 -->
      <view v-show="data.currentTab === 0">
		  <!-- 广告图 -->
		  <view v-for="(item,index) in data.courseIntroImg" :key="index" class="courseIntroImgCon">
			<image :src="item.img" mode="widthFix" class="courseIntroImg"></image>
		  </view>
		  <!-- 产品内容-列表 -->
		  <view class="courseIntroListCon">
			  <view class="courseIntroList">
				  <!-- 产品内容-标题 -->
				  <view class="courseIntroTitle">产品内容</view>
				  <!-- 产品内容-列表 -->
				  <view class="courseIntroConList">
					  <!-- 每条数据 -->
					  <view 
						v-for="(item,index) in data.courseIntroList" 
						:key="index" 
						:class="['courseIntroConListItem',index % 2 === 0 ?'odd' :'even']"
						>
						<text class="courseIntroConListItemNum">{{index+1}}</text>
						<text class="courseIntroConListItemCon">{{item.name}}</text>
					  </view>
				  </view>
			  </view>
			  <!-- 占位容器 -->
			  <view class="zhanwei">1</view>
		  </view>
	  </view>
	  
	  
	  <!-- 课程目录 -->
      <view v-show="data.currentTab === 1">
		  <view class="courseContents">
			  <!-- 列表 -->
			  <view class="courseContentsList">
				  <!-- 每条数据 -->
				  <view 
					v-for="(item,index) in data.courseIntroList"
					:key="index"
					class="courseContentsListItem"
					>
					  <view class="courseContentsListItemNum">{{formattedNumber(index+1)}}</view>
					  <view class="courseContentsListItemCon">
					  	<text class="courseContentsListItemConNme">{{item.name}}</text>
						<text class="courseContentsListItemConTime">时长：{{item.durationStr}}</text>
					  </view>
					  <view class="courseContentsListItemConIcon">
						<text class="iconfont" style="color:#aab7c3;font-size:60rpx;">&#xe615;</text>
					  </view>
				  </view>
			  </view>
			  <!-- 没有更多-占位 -->
			  <view class="courseContentsZhanWei">没有更多了呦~</view>
		  </view>
	  </view>
	  
    </view>
	
	<!-- 开通会员按钮 -->
	<view class="member" @tap="goToMemberPage()">
		<text>开通会员解锁会员专享课&nbsp;</text>
		<text class="iconfont" style="color:#f2c59c;font-size:40rpx;">&#xe7c0;</text>
	</view>
  </view>
</template>

<script lang="ts" setup>
	import {computed, ref} from "vue";
	import { apiCourseDetail, apiCourseCatalogue, apiCompletedStudy,apiCourseList } from '@/api/goods'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  courseList(options.id)
	})
	
	const ipt_content = ref("");
	const data = ref({
		tabs: ['课程介绍', '课程目录'],
		currentTab: 0,
		courseIntroImg:[
			{
				id:1,
				img:'../../static/course/courseIntro1.png',
			},
			{
				id:2,
				img:'../../static/course/courseIntro2.png',
			},
			{
				id:3,
				img:'../../static/course/courseIntro3.png',
			},
			{
				id:4,
				img:'../../static/course/courseIntro4.png',
			},
			{
				id:5,
				img:'../../static/course/courseIntro5.png',
			},
			{
				id:6,
				img:'../../static/course/courseIntro6.png',
			},
			{
				id:7,
				img:'../../static/course/courseIntro7.png',
			},
			{
				id:8,
				img:'../../static/course/courseIntro8.png',
			},
			{
				id:9,
				img:'../../static/course/courseIntro9.png',
			}
		],
		courseIntroList:[
			{
				id:1,
				num:'001',
				name:"比赛问题",
				duration:'00:49:31'
			},
			{
				id:2,
				num:'002',
				name:"倒推问题",
				duration:'00:58:15'
			},
			{
				id:3,
				num:'003',
				name:"等差数列（1）",
				duration:'00:40:04'
			},
			{
				id:4,
				num:'004',
				name:"等差数列（2）",
				duration:'00:40:03'
			},
			{
				id:5,
				num:'005',
				name:"概率问题",
				duration:'00:49:10'
			},
			{
				id:6,
				num:'006',
				name:"工程问题1-给完工时间",
				duration:'01:00:34'
			},
			{
				id:7,
				num:'007',
				name:"工程问题2-效率关系",
				duration:'00:21:31'
			},
			{
				id:8,
				num:'008',
				name:"工程问题3-设效率1",
				duration:'00:22:00'
			},
			{
				id:9,
				num:'009',
				name:"工程问题4-先后整体后部分",
				duration:'00:16:47'
			},
			{
				id:10,
				num:'010',
				name:"工程问题5-牛吃草问题",
				duration:'00:35:56'
			},
			{
				id:11,
				num:'011',
				name:"和差倍比问题",
				duration:'00:54:49'
			},
			{
				id:12,
				num:'012',
				name:"鸡兔同笼1-归边思想",
				duration:'00:45:25'
			},
			{
				id:13,
				num:'013',
				name:"鸡兔同笼2-分组法、互换、不确定总数",
				duration:'00:25:34'
			},
			{
				id:14,
				num:'014',
				name:"几何问题1",
				duration:'00:59:08'
			},
			{
				id:15,
				num:'015',
				name:"几何问题2",
				duration:'00:44:40'
			},
			{
				id:16,
				num:'016',
				name:"经济利润问题1-常规经济利润问题",
				duration:'01:04:59'
			},
			{
				id:17,
				num:'017',
				name:"经济利润问题2-分段计算与统筹经济",
				duration:'00:20:41'
			},
			{
				id:18,
				num:'018',
				name:"年龄问题（1）",
				duration:'00:33:15'
			},
			{
				id:19,
				num:'019',
				name:"年龄问题（2）",
				duration:'00:33:28'
			},
			{
				id:20,
				num:'020',
				name:"排列组合1",
				duration:'00:39:16'
			},
			{
				id:21,
				num:'021',
				name:"排列组合2",
				duration:'00:36:13'
			}
		]
	})
	
	// 获取课程目录
	const courseList = async(id: any) =>{
		const res = await apiCourseDetail({
			id
		})
		console.log(res.courseCatalogues)
		data.value.courseIntroList =res.courseCatalogues
	}
	
	const switchTab = (index:number) => {
		data.value.currentTab = index
	}
	
	const goToMemberPage = () => {
		  uni.navigateTo({
		  	url:'/pages/members/members'
		  })
	}
	
	const formattedNumber = (index: number) => {
	      return index.toString().padStart(3, '0');
	}; 
  
</script>

<style scoped>
	@import url('../../static/fonts/iconfont.css');
</style>
<style scoped>
  .courseDetails {
    display: flex;
    flex-direction: column;
	background: #fff;	
	height: 100vh;
  }
  /* 选项卡 */
  .tabs {
    display: flex;
	justify-content: space-around;
    height: 80rpx;
    line-height: 80rpx;
	font-size: 32rpx;
	background: #fff;
	margin-bottom: 40rpx;
  }
  
  .tab-item {
    color: #b7c2cc;
  }
  
  .tab-item.active {
    color: #000;
    border-bottom: 4rpx solid #007AFF;
  }
  /* 分享 */
  .share {
  	  color: #f00;
  	  font-size: 28rpx;
	  font-weight: 300;
  }
  /* 内容区域 */
  .content {
    background: #fff;
  }
  /* 课程介绍-广告图区域 */
  .courseIntroImgCon {
	  display: flex;
	  flex-wrap: wrap;
  	  width: 100%;
	  overflow: hidden;
  	  background: pink;
	  
  }
  /* 课程介绍-图片 */
  .courseIntroImg {
  	  width: 100%;
	  margin-right: -0.5px; 
	  margin-bottom: -0.5px;
	  transform: scale(1.005); 
  }
  /* 产品内容-列表 */
  .courseIntroListCon {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 100%;
	  background: #fff;
  }
  .courseIntroList {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 92.5%;
	  background: #59b8fc;
	  padding-bottom: 70rpx;
	  border-radius: 0 0 26rpx 26rpx;
  }
  /* 产品内容-标题 */
  .courseIntroTitle {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 92.5%;
	  height: 90rpx;
	  background: #ffab48;
	  border-radius: 20rpx 20rpx 0 0;
	  color: #fff;
	  font-size: 45rpx;
	  font-weight: 700;
  }
  /* 产品内容-列表 */
  .courseIntroConList {
	  display: flex;
	  flex-direction: column;
	  width: 92.5%;
	  background: #fff;
	  border-radius: 0 0 26rpx 26rpx;
	  padding: 25rpx 20rpx 40rpx;
  }
  
  /* 列表的每条数据 */
  .courseIntroConListItem {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 50rpx;
	  /* background: #fff6ed; */
	  border-radius: 16rpx;
  }
  /* 奇数行 */
  .odd {
  	  background: #fff6ed;
  }
  /* 偶数行 */
  .even {
	  background: #fff;
  }
  /* 数字的样式 */
  .courseIntroConListItemNum {
	  font-size: 32rpx;
	  color: #ffab48;
	  padding-right: 26rpx;
	  font-weight: 700;
  }
  /* 数字右侧文字的样式 */
  .courseIntroConListItemCon {
	  width: 100%;
	  font-size: 28rpx;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
  }

/* 课程目录列表 */
.courseContentsList {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30rpx;
}
/* 中间 */
.courseContentsListItemCon {
	display: flex;
	flex-direction: column;
}

  /* 课程目录-每条数据 */
.courseContentsListItem {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 0.5rpx solid #ccc;
}  
/* 课程目录-显示的数字 */
.courseContentsListItemNum {
	padding-right: 20rpx;
	color: #aab7c3;
	font-size: 35rpx;
}
.courseContentsListItemCon {
	flex-grow: 1;
}
/* 课程目录-文字样式 */
.courseContentsListItemConNme {
	font-size: 28rpx;
}
/* 课程目录-时间样式 */
.courseContentsListItemConTime {
	color: #aab7c3;
	font-size: 24rpx;
}
  
  /* 没有更多-占位 */
  .courseContentsZhanWei {
	  display: flex;
	  justify-content: center;
	  width: 100%;
	  height: 260rpx;
	  padding-top: 25rpx;
	  font-size: 32rpx;
	  color:#ccc;
  }
  
  
  /* 占位容器 */
  .zhanwei {
	  width: 100%;
	  height: 170rpx;
	  line-height: 170rpx;
	  background: #fff;
	  color: #fff;
  }
  
  /* 开通会员按钮 */
  .member {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 90%;
	  height: 90rpx;
	  background:linear-gradient(to right, #2a3b6e,#182650) ;
	  color: #f2c59c;
	  font-size: 33rpx;
	  position: fixed;
	  bottom: 2%;
	  left: 50%;
	  border-radius: 22rpx;
	  transform: translate(-50%, -50%);
  }
  
</style>